.nav-content {
    position: relative;
    height: 34px;
    text-align: center;
    color: var(--edit-color-primary-dark-2);
    border: 1px solid var(--edit-color-primary-light-5);
    background-color: var(--edit-color-primary-light-9);
    box-sizing: border-box;
    cursor: pointer;
    & + .nav-content {
        margin-top: 15px;
    }
    &.active {
        outline: 1px solid var(--edit-color-primary);
    }
    .nav-content-left {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        left: 10px;
        display: flex;
        box-sizing: border-box;
        .icon-image {
            width: 14px;
            height: 14px;
        }
    }
    .nav-content-title {
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: center;
    }
    &.type-one {
        .nav-content-title {
            width: 100px;
            margin: 0 auto;
            & > span {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }
    &.type-two {
        .nav-content-title {
            .search-wrap {
                display: flex;
                align-items: center;
                width: 180px;
                height: 26px;
                font-size: 12px;
                text-align: left;
                padding-left: 10px;
                border-radius: 32px;
                margin: 0 40px 0 20px;
                background-color: var(--edit-color-primary-light-7);
                & > span {
                    font-size: 12px;
                    margin-left: 10px;
                }
            }
        }
    }
    &.type-three {
        .nav-content-left {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            height: 26px;
            border-radius: 26px;
            background-color: var(--edit-color-primary-light-7);
            .icon-wrap {
                display: inline-flex;
            }
            .split-line {
                display: inline-block;
                position: relative;
                vertical-align: middle;
                font-size: 0;
                margin: 0 9px 0 8px;
                height: 15px;
                width: 0;
                border-right: 1px solid var(--edit-color-primary-dark-2);
            }
        }
    }
    &.type-four {
        .nav-content-left {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            height: 26px;
            border-radius: 26px;
            background-color: var(--edit-color-primary-light-7);
            .icon-wrap {
                display: inline-flex;
            }
            .split-line {
                display: inline-block;
                position: relative;
                vertical-align: middle;
                font-size: 0;
                margin: 0 9px 0 8px;
                height: 15px;
                width: 0;
                border-right: 1px solid var(--edit-color-primary-dark-2);
            }
        }
        .nav-content-title {
            .search-wrap {
                display: flex;
                align-items: center;
                border-radius: 32px;
                width: 120px;
                height: 26px;
                background-color: var(--edit-color-primary-light-7);
                font-size: 12px;
                text-align: left;
                padding-left: 10px;
                margin-left: 20px;
                & > span {
                    font-size: 12px;
                    margin-left: 10px;
                }
            }
        }
    }
    &.type-five {
        .nav-content-title {
            & > div {
                height: 23px;
                line-height: 23px;
                font-size: 12px;
                &:first-child {
                    background:var(--edit-color-primary-dark-2);
                    border-radius: 100px 0 0 100px;
                    color: var(--edit-color-white);
                    padding: 0 12px 0 14px;
                }
                &:last-child {
                    background-color: var(--edit-color-primary-light-7);
                    border-radius: 0 100px 100px 0;
                    color:var(--edit-color-primary-dark-2);
                    padding: 0 14px 0 12px;
                }
            }
        }
    }
}